<template>
  <NCard>
    <NvForm v-model:form="form" :option />
    {{ form }}
  </NCard>
</template>

<script setup lang="tsx">
import type { NvFormOption } from 'nv-crud'
import { NCard } from 'naive-ui'
import { NvForm } from 'nv-crud'
import { ref } from 'vue'

const form = ref({})

const option: NvFormOption = {
  fields: {
    basic: {
      label: '基础',
      placeholder: '请输入',
      clearable: true,
    },
    disabled: {
      label: '禁用',
      placeholder: '请输入',
      clearable: true,
      disabled: true,
    },
    props: {
      label: '更多属性',
      placeholder: '请输入',
      clearable: true,
      props: {
        status: 'warning',
        loading: true,
        round: true,
      },
    },
    slots: {
      label: '插槽',
      placeholder: '请输入姓名',
      clearable: true,
      slots: {
        prefix: () => 'prefix',
        suffix: () => 'suffix',
      },
    },
    pair: {
      label: '成对',
      type: 'input',
      props: {
        pair: true,
        separator: '-',
        placeholder: ['开始', '结束'],
      },
    },
  },
}
</script>
